<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器</title> 
</head > 
<style>
    .cities{
        background-image: linear-gradient(to top,#DA81F5,#610B5E);
    /* background-color: blueviolet; */
     width: 500px;
     height: 500px;
     position: absolute;
    left: 300px;
    top: 200px;
    }
    .angt{
    border-radius :20px; ;
     background-image: linear-gradient(to top,#8A0886,#CC2EFA);
    width: 400px;
    height: 400px;
    position: absolute;
    left:50px;
    top:50px;
    }
    .fen{
        border-radius :20px; ;
        background-color: rgb(1, 5, 2);
     width: 300px;
     height: 200px;
     position: absolute;
    left:50px;
    top:85px;
    }
    .fan{
        background-image: linear-gradient(to top,#FAAC58,#FF8000);
     width: 250px;
     height: 150px;
     position: absolute;
    left:25px;
    top:25px;
    }
    .yuan{
    width: 150px;
     height: 150px;
     background-color:#FFFFFF ;
     border-radius:50%;
     position: absolute;
     left: 40px;
    top: 0px;
    }
    .sjx{
        border:38px solid#FFFFFF ;
        border-top-color: nonek;
		border-bottom-color: none;
		border-left-color: black;
		border-right-color: none;
        position: absolute;
        left: 60px;
        top: 30px;

    }
</style>
<body>
    <div class="cities">
      <div class="angt">
          <div class="fen">
            <div class="fan">
                <div class="yuan">
                    <div class="sjx"></div>
                </div>
            </div>
          </div>
      </div>
     
    </div>
</body>
</html>